<template>
  <div class="wfull">
    <!-- 头部导航 -->
    <div class="wfull p-l10 p-r10 border-box">
      <div class="home_page_tab flex justify_between wfull">
        <div class="tabs_module">
          <ul class="tab-list flex w70p " >
            <li class="pointer lineH45 text-align-c" :class="{tabActive:item.meta.code == compNameRef}"  v-for="item in tabsList.value" :key="item.meta.code" @click="handleClick(item.meta.code)">{{item.title}}</li>
          </ul>
        </div>
        <ul class="flex flex1 justify_end tab-right">
          <li class="pointer lineH45 mr10" @click="jumpLogin">{{$t('homePage_free_to_use_btn')}}</li>
          <li class="pointer lineH45" >{{$t('homePage_open_platform_btn')}}</li>
        </ul>
      </div>
    </div>
     <component :is="compNameRef"></component>
  </div>
</template>

<script lang="ts">
import { reactive, defineComponent, ref, defineAsyncComponent } from "vue";
import {
  ReactiveDataType,
  HeadTabDataType,
} from "../../viewModel/HomePageViewModel/HomePageViewModel";
import { tabData } from "../../viewModel/HomePageViewModel/modelData";
import { useI18n } from "vue-i18n";
import {useRouter} from "vue-router";


export default defineComponent({
  components: {
    HomeCom: defineAsyncComponent(
      () =>
        import(
          /*webpackChunkName: "HomeCom"*/ "../../components/HomePageCom/HomeCom.vue"
        )
    ),
    ProductCenter: defineAsyncComponent(
      () =>
        import(
          /*webpackChunkName: "ProductCenter"*/ "../../components/HomePageCom/ProductCenter.vue"
        )
    ),
    Solution: defineAsyncComponent(
      () =>
        import(
          /*webpackChunkName: "Solution"*/ "../../components/HomePageCom/Solution.vue"
        )
    ),
    ChannelCooperation: defineAsyncComponent(
      () =>
        import(
          /*webpackChunkName: "ChannelCooperation"*/ "../../components/HomePageCom/ChannelCooperation.vue"
        )
    ),
    AboutUS: defineAsyncComponent(
      () =>
        import(
          /*webpackChunkName: "AboutUS"*/ "../../components/HomePageCom/AboutUS.vue"
        )
    ),
  },
  setup() {
    const router = useRouter()

    const { t } = useI18n();
    let compNameRef = ref<string>("HomeCom");

    let tabsList = reactive<ReactiveDataType<HeadTabDataType>>({ value: [] });
    tabsList.value = tabData.map((item) => {
      return {
        ...item,
        title: t(item.title),
      };
    });

    function handleClick(payload:string) {
      compNameRef.value = payload
    }

   function jumpLogin() {
      router.push({
        path: "/freeTrial"
      })
    }

    return {
      handleClick,
      tabsList,
      compNameRef,
      jumpLogin,
    };
  },
});
</script>
<style scoped>

.tabs_module {
  display: flex;
  align-items: center;
  width: 80%;
}
.tab-list li {
  flex: 1;
  box-sizing: border-box;
}
.tab-list li:hover:not(.tabActive) {
  color: #2878ff;
  border-bottom: 2px solid #2878ff;
}

.tabActive {
  color: #ffffff;
  background-color: #2878ff;
}
.tab-right li:hover {
  color: #2878ff;
}
</style>
